<template>
  <div class="new_auction_detail">
    <c-title :hide="false" :text="'拍品详情'"></c-title>
    <div class="goods">
      <div class="goods_top">
        <div class="goodsimg" v-if="info.has_one_goods">
          <img :src="info.has_one_goods.thumb" alt="" />
        </div>
        <div class="goods_r">
          <div class="goods_r_t">
            <div class="line">日期</div>
            <div class="line">落槌价</div>
          </div>
          <div class="goods_r_t" v-for="(dateInof, index) in info.increase_log" :key="index">
            <div class="line">{{ dateInof.date }}</div>
            <div class="line">{{ $i18n.t("money") }}{{ dateInof.after_amount }}</div>
          </div>
        </div>
      </div>
      <div class="goods_b">
        <div class="txt" v-if="info.increase_log && info.increase_log.length > 0">最新落槌价：{{ $i18n.t("money") }}{{ info.increase_log[0].after_amount }}</div>
        <div class="txt" v-if="info.running_status != 2">
          <span>{{ info.running_status ? "结束倒计时：" : "开拍倒计时：" }}</span>
          <van-count-down :time="setTime(info)"> </van-count-down>
        </div>
        <div class="txt">结束时间：{{ timestampToTime(info.end_second) }}</div>
      </div>
    </div>
    <div class="goods_detail" v-if="info.has_one_goods">
      <div class="txt">拍品详情</div>
      <van-cell :border="false" title="拍品名称" :value="info.has_one_goods.title" title-class="cell_l" value-class="cell_r" />
      <van-cell :border="false" title="数量" :value="info.show_stock" title-class="cell_l" value-class="cell_r" />
      <van-cell :border="false" title="付款时间" v-if="info.pay_desc" :value="info.pay_desc" title-class="cell_l" value-class="cell_r" />
      <van-cell :border="false" v-if="info.param_desc" title="参数" :value="info.param_desc" title-class="cell_l" value-class="cell_r" />
      <van-cell :border="false" title="起始价" :value="`${$i18n.t('money')}${info.min_amount}`" title-class="cell_l" value-class="cell_r" />
      <van-cell :border="false" title="拍价递增比" :value="info.increase_percent + '%'" title-class="cell_l" value-class="cell_r" />
      <van-cell :border="false" title="提货价" :value="$i18n.t('money') + info.max_amount" title-class="cell_l" value-class="cell_r" />
      <van-cell :border="false" title="市场价" :value="$i18n.t('money') + info.market_amount" title-class="cell_l" value-class="cell_r" />
    </div>
    <div class="tabBox">
      <van-tabs v-model="active" line-width="24px" title-active-color="#F15353" title-inactive-color="#00001C">
        <van-tab title="拍品介绍" title-style="font-weight: bold;font-size: 0.94rem;">
          <div v-html="auctionConten" class="contenBox"></div>
        </van-tab>
        <van-tab title="拍品图" title-style="font-weight: bold;font-size: 0.94rem;">
          <div class="imgList" v-if="info.has_one_goods">
            <img v-if="info.has_one_goods.thumb" :src="info.has_one_goods.thumb" alt="" />
            <template v-for="(item, index) in info.has_one_goods.thumb_url">
              <div :key="index">
                <img :src="item" alt="" />
              </div>
            </template>
          </div>
        </van-tab>
        <van-tab title="上拍方信息" title-style="font-weight: bold;font-size: 0.94rem;">
          <div class="auction-info">
            <van-cell :border="false" title="上拍方" v-if="info.saler_desc" :value="info.saler_desc" title-class="cell_l" value-class="cell_r" />
            <van-cell :border="false" title="联系人" v-if="info.saler_name" :value="info.saler_name" title-class="cell_l" value-class="cell_r" />
            <van-cell :border="false" title="联系电话" v-if="info.saler_mobile" :value="info.saler_mobile" title-class="cell_l" value-class="cell_r" />
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="btn set-pc-style">
      <!-- 禁用 class = default -->
      <div class="btn_l isb" :class="info.usable_auction_goods_count == 0 ? 'default' : ''" @click="popupShow_noJoin">委拍</div>
      <div class="btn_r isb" :class="info.running_status == 1 ? '' : 'default'" @click="popupShowJoin">参拍</div>
    </div>
    <optionPopup :showPopup="popupShow" @closePopup="closePopup" :isJoin="isJoin" :item="info" @onUpdate="getData"></optionPopup>
  </div>
</template>
<script>
import optionPopup from "./components/optionPopup";
export default {
  data() {
    return {
      active: 0,
      auctionConten: "",
      popupShow: false,
      isJoin: false,
      info: []
    };
  },
  components: { optionPopup },
  activated() {
    this.getData();
  },
  computed: {
    setTime(item) {
      return function(item) {
        let nowTime = new Date().getTime();
        let rtime = "";
        if (item.running_status == 0) {
          // 未开始
          rtime = (item.start_second * 1000 - nowTime).toFixed(0);
          console.log(rtime, "wwwwwwwwww", item.start_second, nowTime);
        } else if (item.running_status == 1) {
          // 进行中
          rtime = (item.end_second * 1000 - nowTime).toFixed(0);
        }
        return rtime;
      };
    }
  },
  methods: {
    closePopup() {
      this.popupShow = false;
    },
    popupShowJoin() {
      if (this.info.running_status != 1) return;
      this.popupShow = true;
      this.isJoin = true;
    },
    popupShow_noJoin() {
      if (this.info.usable_auction_goods_count == 0) return;
      this.popupShow = true;
      this.isJoin = false;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.activity.detail", { id: this.$route.params.id }, "");
      if (result) {
        this.info = data;
        this.auctionConten = data.has_one_goods.content;
      } else {
        this.$toast(msg);
      }
    },
    timestampToTime(timestamp) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      let D = (date.getDate() < 10 ? "0" + date.getDate() + " ": date.getDate()) + " ";
      let h = (date.getHours() < 10 ? "0" + date.getHours() + ":": date.getHours()) + ":";
      let m = date.getMinutes() < 10 ? "0" + date.getMinutes() + ":": date.getMinutes() + ":";
      let s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }
  }
};
</script>
<style>
.contenBox img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
  margin-top: 0.63rem;
}
</style>
<style lang="scss" scoped>
.imgList {
  margin-top: 0.63rem;
  img {
    width: 100%;
    height: auto;
  }
}

.new_auction_detail {
  padding: 0.63rem 0.75rem;
  box-sizing: border-box;
  padding-bottom: 4rem;
  .goods {
    padding: 0.75rem 0.75rem 1.25rem 0.75rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    background: #fff;
    .goods_b {
      margin-top: 1.25rem;
      .txt {
        font-weight: 500;
        font-size: 0.88rem;
        color: #00001c;
        margin-bottom: 0.63rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .txt:last-child {
        margin-bottom: 0;
      }
    }
    .goods_top {
      display: flex;
      justify-content: space-between;
      .goodsimg {
        flex-shrink: 0;
        width: 8.06rem;
        height: 8.06rem;
        background: #c1c1c1;
        border-radius: 0.75rem;
        margin-right: 0.75rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.75rem;
        }
      }
      .goods_r {
        flex: 1;
        border-radius: 0.5rem;
        .goods_r_t {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #f2f4f8;
          height: 2rem;
          .line {
            flex: 1;
            padding-left: 0.91rem;
            text-align: left;
          }
        }
        .goods_r_t:nth-child(2) {
          background: #fff;
        }
        .goods_r_t:nth-child(4) {
          background: #fff;
        }
      }
    }
  }
  .goods_detail {
    margin-top: 0.75rem;
    padding: 0 0.75rem;
    padding-top: 1.19rem;
    padding-bottom: 1.14rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.5rem;
    .txt {
      font-weight: bold;
      font-size: 0.94rem;
      text-align: left;
    }
    .van-cell {
      padding: 0;
      padding-top: 1.16rem;
    }
    .cell_l {
      text-align: left;
      font-weight: 400;
      font-size: 0.88rem;
      color: #3b3b4a;
      line-height: 0.9rem;
    }
    .cell_r {
      font-weight: 500;
      font-size: 0.88rem;
      color: #00001c;
      line-height: 0.9rem;
    }
  }
  .tabBox {
    margin-top: 0.63rem;
    background: #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
    .auction-info {
      .cell_l {
        font-size: 0.88rem;
        color: #3b3b4a;
        text-align: left;
      }
      .cell_r {
        font-weight: 500;
        font-size: 0.88rem;
        color: #00001c;
        text-align: right;
      }
    }
  }
  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.25rem;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    .isb {
      width: 10.31rem;
      height: 2.5rem;
      border-radius: 1.25rem;
      color: #fff;
      text-align: center;
      line-height: 2.5rem;
      text-align: center;
    }
    .btn_l {
      background: #ffa229;
      margin-right: 0.69rem;
    }
    .btn_r {
      background: #f15353;
    }
    .default {
      background: #aaaab3;
      color: #fff;
    }
  }
}
</style>
